<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            position: absolute;

        }
    </style>
    <script>

        window.onload = function () {
            let arr = ["#ffc0cb", "#87ceeb", "#ff0000", "#808080", "#00ff00", "#ffa500", "#800080"];

            let box = document.getElementById("box");
            for (let i = 0; i < 100; i++) {
                let color = Math.round(Math.random() * arr.length);
                let X = Math.round(Math.random() * 700);
                let Y = Math.round(Math.random() * 400);
                box.innerHTML += "<h1 style=\"background-color: " + arr[color] + ";margin-left: " + X + "px;margin-top: " + Y + "px\"></h1>"
            }
        }

    </script>
</head>
<body>


<table id="box" border="1px" style="width: 800px;height: 500px;overflow: hidden">

</table>
</body>
</html>